<template>
	<div class="simulation">
		<div class="container">
			<!-- 瀑布流内容 -->
			<div class="waterfall">
				<!-- 卡片1 -->
				<div class="card" v-for="item of imgPic" :key="item.id">
					<div class="card-image">
						<image :src="item.url" mode="heightFix" @click="clickImg(item.url)"></image>
					</div>
					<div class="card-content">
						<h3 class="card-title">{{ item.time }}</h3>
						<p class="card-desc">{{ item.content }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
let imgPic = ref([
	{
		url: '/static/pic0.png',
		content: '第二天凌晨',
		time: '2025-7-30',
		id: 0
	},
	{
		url: '/static/pic7.png',
		content: '出院那天',
		time: '2025-8-5',
		id: 1
	},
	{
		url: '/static/pic1.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 2
	},
	{
		url: '/static/pic2.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 3
	},
	{
		url: '/static/pic3.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 4
	},
	{
		url: '/static/pic4.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 5
	},
	{
		url: '/static/pic5.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 6
	},
	{
		url: '/static/pic6.png',
		content: '搞笑生活照',
		time: '2025-8-15',
		id: 7
	},
	{
		url: '/static/pic8.png',
		content: '不知道在想啥',
		time: '2025-8-18',
		id: 8
	},
	{
		url: '/static/pic9.png',
		content: '嗯',
		time: '2025-8-20',
		id: 9
	}
]);
// 预览图片
const clickImg = (url) => {
	uni.previewImage({
		urls: [url]
	});
};
</script>

<style lang="scss" scoped>
.simulation {
	/* 内容区域 */
	.container {
		margin: 20px auto;
		padding: 0 15px;

		/* 瀑布流布局 */
		.waterfall {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
			gap: 20px;

			.card {
				background: white;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				cursor: pointer;

				.card-image {
					width: 100%;
					height: 0;
					padding-bottom: 100%;
					position: relative;
					overflow: hidden;

					img {
						position: absolute;
						width: 100%;
						height: 100%;
						object-fit: contain;
						transition: transform 0.5s ease;
					}
				}

				.card-content {
					padding: 12px;
					.card-title {
						font-size: 16px;
						font-weight: 600;
						margin-bottom: 8px;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.card-desc {
						font-size: 14px;
						color: #666;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 12px;
						line-height: 1.4;
					}
				}
			}
		}
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.waterfall {
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			gap: 15px;
		}
	}

	@media (max-width: 480px) {
		.waterfall {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}
</style>
